<template>
    <!-- 导航 -->
    <van-nav-bar title="购物车" left-text left-arrow @click-left="back"></van-nav-bar>

    <!-- 购物车列表 -->
    <van-checkbox-group v-model="checked">
        <div class="product" v-for="item in cartlist" :key="item">
            <!-- 复选框 -->
            <van-checkbox :name="item.id" class="item"></van-checkbox>

            <!-- 购物车商品 滑动单元格 -->
            <van-swipe-cell>
                <van-card
                    :price="item.total"
                    :desc="'单价：￥' + item.price"
                    :title="item.product.name"
                    :thumb="item.product.cover_cdn"
                >
                    <!-- 库存 -->
                    <template #tags>
                        <p>库存：{{ item.product.stock }}</p>
                    </template>

                    <!-- 右下角计数器 -->
                    <template #footer>
                        <van-stepper
                            v-model="item.nums"
                            :name="item.id"
                            disable-input
                            @change="CartStep"
                        />
                    </template>
                </van-card>

                <!-- 右侧滑动区域的内容 -->
                <template #right>
                    <van-button
                        square
                        text="删除"
                        type="danger"
                        class="delete-button"
                        @click="CartDel(item.id)"
                    />
                </template>
            </van-swipe-cell>
        </div>
    </van-checkbox-group>

    <!-- 提交订单栏 -->
    <van-submit-bar :price="total" button-text="立即下单" @submit="SubmitOrder" />

</template>
<script>
    export default {
        name: 'CartIndex',
        emits: ['toggle'],
        // 传值给到父组件
        created() {
            this.$emit('toggle', false)

            this.LoginUser = this.$cookies.get('LoginUser')
            this.cartData();
        },
        data(){
            return{
                // total: 0,
                cartlist: [],
                checked: [],
                LoginUser: {}
            }
        },
        computed:{
            // 总数
            total(){
                // 当复选框没有选中任何一个 那么总价就是0
                if(this.checked.length <= 0){
                    return 0
                }

                var total = 0

                this.cartlist.forEach(val => {
                    // in_array id是否在数组内 includes 判断是否在数组内
                    //如果在数组里就说明当前购物车记录被选中
                    if(this.checked.includes(val.id)){
                        total += parseFloat(val.total)
                    }
                })

                total = parseFloat(total) * 100
                return total
            }
        },
        methods: {
            back() {
                // this.$router.go(-1)
                this.$router.push('/')
            },
            // 获取购物车列表
            async cartData() {
                let  result = await this.$api.AddIndex({userid: this.LoginUser.id})

                if(result.code == '1'){
                    this.cartlist = result.data
                } else{
                    this.$notify({
                        message:result.msg,
                        duration:1000,
                    })
                    return false
                }
            },
            // 删除购物车
            CartDel(id){
                //弹出确认对话框
                this.$dialog.confirm({
                    'title': '删除购物车',
                    'message': '是否确认删除商品'
                })
                .then(async () => {

                    let data = {
                        id: id,
                        userid: this.LoginUser.id
                    }
                    
                    let result = await this.$api.DelCart(data);

                    if(result.code == '1'){
                        this.cartData();
                    } else{
                        this.$notify({
                            message:result.msg,
                            duration:1000,
                        })
                        return false
                    }

                })
            },
            // 修改购物车
            async CartStep(val,detail){

                let data = {
                    nums: val,
                    id: detail.name,
                    userid: this.LoginUser.id
                }
                let  result  = await this.$api.EditCart(data)

                if(result.code == '1'){
                    this.cartData();
                } else{
                    this.$notify({
                        message:result.msg,
                        duration:1000,
                    })
                    return false
                }
            },
            // 跳转到确认下单
            SubmitOrder(){
                this.$router.push({
                    path: '/product/cart/confirm',
                    query: {
                        cartids: this.checked.join()
                    }
                })
            }
        }
    }
</script>
<style>
    .product {
        position: relative;
    }

    .product .van-card {
        padding-left: 3em;
    }

    .product .van-card__footer {
        position: absolute;
        right: 1em;
        bottom: 1em;
    }

    .item {
        position: absolute;
        z-index: 1;
        top: 42%;
        left: 1%;
    }

    .delete-button {
        height: 100% !important;
    }
</style>